<template>
	<div>
		<van-nav-bar left-text="取消" right-text="完成" @click-right="onConfirm" @click-left="$emit('close')" title="设置昵称">
		</van-nav-bar>
		
		<van-field
		  v-model="localName"
		  rows="2"
		  autosize
		  type="textarea"
		  maxlength="7"
		  placeholder="请输入昵称"
		  show-word-limit
		/>
	</div>
</template>

<script>
	import {updateUserProfile} from '@/api/user.js'
	
	export default {
		props: {
			value: {
				type: String,
				required: true
			}
		},
		
		data() {
			return {
				localName: this.value,
			}
		},
		
		methods: {
			async onConfirm() {
				this.$toast.loading({
					message: '更新中...',
					forbidClick: true,
					duration: 0
				})
				
				try{
					const localName = this.localName
					if(!localName.length) {
						this.$toast("昵称不能为空")
						return
					}
					
					const {data: res} = await updateUserProfile({
						name: localName
					})
					this.$emit('input', localName)
					this.$emit('close')
					this.$toast.success("更新昵称成功")
				}catch(e){
					this.$toast.fail("更新昵称失败")
				}
			},
		},
	}
</script>

<style lang="less" scoped>
	/deep/ .van-nav-bar__content {
		background-color: unset;
		margin-bottom: 20px;

		.van-nav-bar__title {
			color: #000 !important;
		}
	}
</style>
